<template>
  <div id="index">
    <!-- 院部新闻 -->
    <div class="News">
      <div class="news">
        <div class="news-title">
          <div class="title">院部新闻</div>
          <div class="imgs">
            <div class="im-s">查看更多</div>
            <img src="../../assets/33上一页、前一页.png" alt="" />
          </div>
        </div>
        <!-- 1开始 -->
        <div class="news-box" v-for="(item,index) in newsList" :key="item.id">
          <div class="nb-left">
            <img :src="item.image" alt="" />
          </div>
          <div class="nb-right">
            <div class="cr-title">
              {{ item.title }}
            </div>
            <!-- <div class="cr-title">第二1支部开展主题...</div> -->
            <div class="line">
              <div class="line1"></div>
              <div class="day">{{ item.create_time }}</div>
            </div>
            <div class="cr-cent">
              {{ item.abstract }}
            </div>
            <div class="cr-botom">
              <img
                src="../../assets/308上一页、后退、返回-圆框.png"
                alt=""
                class="img-left"
              />
              <img
                src="../../assets/309下一页、前进、查看更多-圆框.png"
                alt=""
                class="img-right"
              />
              <div class="num"><text class="fi">{{index+1}}/</text>{{ newsList.length }}</div>
            </div>
          </div>
        </div>
        <!-- 1 结束-->
        <!-- 2 开始-->
        <!-- <div class="news-box">
          <div class="nb-left">
            <img src="../../assets/微信图片_20240523093643.png" alt="" />
          </div>
          <div class="nb-right">
            <div class="cr-title">
              传承八一精神 凝聚奋进力量|旅游与服务系第一
            </div>
            <div class="cr-title">第二1支部开展主题...</div>
            <div class="line">
              <div class="line1"></div>
              <div class="day">2022-11-02</div>
            </div>
            <div class="cr-cent">
              传承八一精神 凝聚奋进力量|旅游与服务系第一第二1支部开展主题...
            </div>
            <div class="cr-botom">
              <img
                src="../../assets/308上一页、后退、返回-圆框.png"
                alt=""
                class="img-left"
              />
              <img
                src="../../assets/309下一页、前进、查看更多-圆框.png"
                alt=""
                class="img-right"
              />
              <div class="num"><text class="fi">2</text>/3</div>
            </div>
          </div>
        </div> -->
        <!-- 2 结束-->
        <!-- 3 开始-->
        <!-- <div class="news-box">
          <div class="nb-left">
            <img src="../../assets/微信图片_20240523093658.jpg" alt="" />
          </div>
          <div class="nb-right">
            <div class="cr-title">
              传承八一精神 凝聚奋进力量|旅游与服务系第一
            </div>
            <div class="cr-title">第二1支部开展主题...</div>
            <div class="line">
              <div class="line1"></div>
              <div class="day">2022-11-02</div>
            </div>
            <div class="cr-cent">
              传承八一精神 凝聚奋进力量|旅游与服务系第一第二1支部开展主题...
            </div>
            <div class="cr-botom">
              <img
                src="../../assets/308上一页、后退、返回-圆框.png"
                alt=""
                class="img-left"
              />
              <img
                src="../../assets/309下一页、前进、查看更多-圆框.png"
                alt=""
                class="img-right"
              />
              <div class="num"><text class="fi">3</text>/3</div>
            </div>
          </div>
        </div> -->
        <!-- 3 结束 -->
        <div class="nb-co">
          <div class="nb-left" v-for="(item, index) in news" :key="index">
            <div class="nl-bo">
              <div class="nb-cen">
                {{ item.text }}
              </div>
              <div class="nb-day">
                <img :src="item.img" alt="" />
                <div>{{ item.day }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 校企合作 -->
    <div class="scool">
      <div class="scol-box">
        <div class="sc-left">
          <div class="sc-title">
            <div class="news-title">
              <div class="title">1团建设</div>
              <div class="imgs">
                <div class="im-s">查看更多</div>
                <img src="../../assets/33上一页、前一页.png" alt="" />
              </div>
            </div>
          </div>
          <div class="sl-box" v-for="(item, index) in scol" :key="index">
            <div class="scl-box">
              <div class="sc-bo-day">{{ item.day }}</div>
              <div class="sc-bo-da">{{ item.yer }}</div>
            </div>
            <div class="sl-box-ce">{{ item.ji }}</div>
          </div>
        </div>
        <div class="sc-cen">
          <img src="../../assets/未标题-1-min.png" alt="" />
        </div>
        <div class="sc-right">
          <div class="sc-title">
            <div class="news-title">
              <div class="title">校企合作</div>
              <div class="imgs">
                <div class="im-s">查看更多</div>
                <img src="../../assets/33上一页、前一页.png" alt="" />
              </div>
            </div>
          </div>
          <div class="sl-box" v-for="(item, index) in scol" :key="index">
            <div class="sl-box-ce">{{ item.ji }}</div>
            <div class="scl-box">
              <div class="sc-bo-day">{{ item.day }}</div>
              <div class="sc-bo-da">{{ item.yer }}</div>
            </div>
          </div>
          <!-- 111 -->
          <div class="sl-2">
            <div class="sl-box1" v-for="(item, index) in scol" :key="index">
              <div class="scl-box">
                <div class="sc-bo-day">{{ item.day }}</div>
                <div class="sc-bo-da">{{ item.yer }}</div>
              </div>
              <div class="sl-box-ce">{{ item.ji }}</div>
            </div>
          </div>
          <!-- 111 -->
        </div>
      </div>
    </div>
    <!-- 技能大赛 -->
    <div class="skill">
      <div class="skill-box">
        <div class="skill-title">
          <div class="title">技能大赛</div>
          <div class="imgs">
            <div class="im-s">查看更多</div>
            <img src="../../assets/33上一页、前一页.png" alt="" />
          </div>
        </div>
        <div class="skill-swiper">
          <t-swiper
            class="tdesign-demo-block--swiper"
            type="card"
            :height="280"
            :duration="300"
            :interval="2000"
          >
            <t-swiper-item v-for="(item, index) in skill" :key="index">
              <div class="st">
                <img :src="item.img" alt="" />
                <div class="st-topl">
                  <div class="stt-d">{{ item.day }}</div>
                  <div class="stt-cen">{{ item.text1 }}</div>
                  <div class="stt-img"><img :src="item.img2" alt="" /></div>
                </div>
              </div>
            </t-swiper-item>
            <!-- <t-swiper-item>
              <div class="demo-item">
                <img src="../../assets/微信图片_20240523093650.png" alt="" />
              </div>
            </t-swiper-item>
            <t-swiper-item>
              <div class="demo-item">
                <img src="../../assets/微信图片_20240523093643.png" alt="" />
              </div>
            </t-swiper-item> -->
          </t-swiper>
        </div>
        <div class="sk-sw">
          <div class="st" v-for="(item, index) in skill" :key="index">
            <img :src="item.img" alt="" />
            <div class="st-topl">
              <div class="stt-d">{{ item.day }}</div>
              <div class="stt-cen">{{ item.text1 }}</div>
              <div class="stt-img"><img :src="item.img2" alt="" /></div>
            </div>
          </div>
          <!-- <img src="../../assets/技能.png" alt="" />
          <img src="../../assets/技能.png" alt="" />
          <img src="../../assets/技能.png" alt="" /> -->
        </div>
      </div>
    </div>
    <!-- 教研成果 -->
    <div class="box4">
      <div class="box4title">
        <div class="box4title1">JIAO YAN CHENG GUO</div>
        <div class="box4title2">教研成果</div>
      </div>
      <div class="box4center">
        <div class="box4center1" v-for="(item, index) in jiao" :key="index">
          <div class="box4center1-1">
            <img :src="item.img" alt="" />
            <div class="box4center1-1font">
              {{ item.text1 }} <br />
              {{ item.text2 }} <br />
              {{ item.text3 }}
            </div>
            <div class="box4center1-2font">
              {{ item.text4 }}<br />
              {{ item.text5 }}
            </div>
          </div>
          <div class="box4center1-2">
            {{ item.day }}
          </div>
        </div>
      </div>
    </div>
    <!-- 学生动态 -->
    <div class="box5">
      <div class="box5center">
        <div class="box5-title">
          <div class="title">学生动态</div>
          <div class="imgs">
            <div class="im-s">查看更多</div>
            <img src="../../assets/33上一页、前一页.png" alt="" />
          </div>
        </div>
        <div class="box5-2">
          <div class="box5-bottom">
            <div class="box5-bottomleft">
              <div class="box5-bottomleft1">
                <div class="box5-bottomleft1-1">迎新晚会·独唱</div>
                <div class="box5-bottomleft1-2"><button>更多+</button></div>
              </div>
            </div>
            <div class="box5-bottomright">
              <div class="box5-bottomright1">
                <div class="box5-bottomright1-1">
                  <img src="../../assets/微信图片_20240523093643.png" alt="" />
                </div>
                <div class="box5-bottomright1-2">迎新晚会现代舞</div>
              </div>
              <div class="box5-bottomright1">
                <div class="box5-bottomright1-1">
                  <img src="../../assets/微信图片_20240523093714.png" alt="" />
                </div>
                <div class="box5-bottomright1-2">运动会</div>
              </div>
              <div class="box5-bottomright1">
                <div class="box5-bottomright1-1">
                  <img src="../../assets/微信图片_20240523093658.jpg" alt="" />
                </div>
                <div class="box5-bottomright1-2">运动会全景</div>
              </div>
              <div class="box5-bottomright1">
                <div class="box5-bottomright1-1">
                  <img src="../../assets/微信图片_20240523093650.png" alt="" />
                </div>
                <div class="box5-bottomright1-2">才艺展示</div>
              </div>
            </div>
          </div>
        </div>
        <div class="box5-font">
          <div>友情链接</div>
          <div>教育部</div>
          <div>山东教育厅</div>
          <div>山东省科学技术厅</div>
          <div>中国高职专教育网</div>
          <div>山东省科学厅</div>
          <div>中国高职专教育网</div>
        </div>
      </div>
    </div>
    <!--底部 -->
    <div class="foot">
      <div class="footcenter">
        <div class="footcenter-left">
          <div class="footcenter-left-1">联系我们</div>
          <div class="footcenter-left-2">
            <table>
              <tr>
                <td>办公室</td>
                <td>&nbsp;:&nbsp;&nbsp;0535-2246666</td>
              </tr>
              <tr>
                <td>招生咨询</td>
                <td>&nbsp;:&nbsp;&nbsp;0535-2246625</td>
              </tr>
              <tr>
                <td>官网</td>
                <td>&nbsp;:&nbsp;&nbsp;www.sdcc.edu.cn</td>
              </tr>
              <tr>
                <td>邮箱</td>
                <td>&nbsp;:&nbsp;&nbsp;sdccxy@126.com</td>
              </tr>
              <tr>
                <td>校址</td>
                <td>&nbsp;:&nbsp;&nbsp;山东省烟台市高新区海天路1001号</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="footcenter-center">
          <img src="../../assets/3-min.png" alt="" />
        </div>
        <div class="footcenter-right">
          <div class="footcenter-right-top">
            <img
              class="footcenter-right1"
              src="../../assets/微信.png"
            /><br />官方微信
          </div>
          <div class="footcenter-right-bottom">
            <img
              class="footcenter-right2"
              src="../../assets/微博.png"
            /><br />官方微博
          </div>
        </div>
      </div>
      <div class="footbottom">Copyright 心山东省城市服务技师学院版权所有</div>
    </div>
    <!-- 手机端底部 -->
    <div class="footph">
      <div class="footcenter">
        <div class="footcenter-center">
          <img src="../../assets/3-min.png" alt="" />
        </div>
        <div class="fp-bot">
          <div class="footcenter-left">
            <div class="footcenter-left-1">联系我们</div>
            <div class="footcenter-left-2">
              <table>
                <tr>
                  <td>办公室</td>
                  <td>&nbsp;:&nbsp;&nbsp;0535-2246666</td>
                </tr>
                <tr>
                  <td>招生咨询</td>
                  <td>&nbsp;:&nbsp;&nbsp;0535-2246625</td>
                </tr>
                <tr>
                  <td>官网</td>
                  <td>&nbsp;:&nbsp;&nbsp;www.sdcc.edu.cn</td>
                </tr>
                <tr>
                  <td>邮箱</td>
                  <td>&nbsp;:&nbsp;&nbsp;sdccxy@126.com</td>
                </tr>
                <tr>
                  <td>校址</td>
                  <td>&nbsp;:&nbsp;&nbsp;山东省烟台市高新区海天路1001号</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="footcenter-right">
            <img src="../../assets/微信二维码.png" alt="" />
          </div>
        </div>
      </div>
      <div class="footbottom">Copyright 心山东省城市服务技师学院版权所有</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import $ from "jquery";
import {getnsList} from "@/api/index.js"
const skill = reactive([
  {
    text1: "我院参加全省技工院校学生资助管理工....",
    day: "2021-09-10",
    img: "../../../public/微信图片_20240523093607.jpg",
    img2: "../../../public/33上一页、前一页.png",
  },
  {
    text1: "我院参加全省技工院校学生资助管理工....",
    day: "2021-09-10",
    img: "../../../public/微信图片_20240523093607.jpg",
    img2: "../../../public/33上一页、前一页.png",
  },
  {
    text1: "我院参加全省技工院校学生资助管理工....",
    day: "2021-09-10",
    img: "../../../public/微信图片_20240523093607.jpg",
    img2: "../../../public/33上一页、前一页.png",
  },
]);
const jiao = reactive([
  {
    text1: "划重点!一图读懂山东",
    text2: "城院“十四五”发",
    text3: "展规划",
    text4: "山东城院“五心工程”",
    text5: "温暖校园",
    day: "3月24日，一场别开生面的平台通 过网络直播的形式拉开帷幕...",
    img: "../../../public/12.png",
  },
  {
    text1: "划重点!一图读懂山东",
    text2: "城院“十四五”发",
    text3: "展规划",
    text4: "山东城院“五心工程”",
    text5: "温暖校园",
    day: "3月24日，一场别开生面的平台通 过网络直播的形式拉开帷幕...",
    img: "../../../public/12.png",
  },
  {
    text1: "划重点!一图读懂山东",
    text2: "城院“十四五”发",
    text3: "展规划",
    text4: "山东城院“五心工程”",
    text5: "温暖校园",
    day: "3月24日，一场别开生面的平台通 过网络直播的形式拉开帷幕...",
    img: "../../../public/12.png",
  },
  {
    text1: "划重点!一图读懂山东",
    text2: "城院“十四五”发",
    text3: "展规划",
    text4: "山东城院“五心工程”",
    text5: "温暖校园",
    day: "3月24日，一场别开生面的平台通 过网络直播的形式拉开帷幕...",
    img: "../../../public/12.png",
  },
]);
const news = reactive([
  {
    text: "传承八一精神 凝聚奋进力量|旅游与服务系第一第二1支部开展主题...",
    day: "2022-11-02",
    img: "../../../public/22.png",
  },
  {
    text: "传承八一精神 凝聚奋进力量|旅游与服务系第一第二1支部开展主题...",
    day: "2022-11-02",
    img: "../../../public/22.png",
  },
  {
    text: "传承八一精神 凝聚奋进力量|旅游与服务系第一第二1支部开展主题...",
    day: "2022-11-02",
    img: "../../../public/22.png",
  },
]);
const scol = reactive([
  {
    day: "28",
    yer: "2019-01",
    ji: "中餐学院2022级新生军训圆满闭营,中餐学院2022级新生军训…",
  },
  {
    day: "28",
    yer: "2019-01",
    ji: "中餐学院2022级新生军训圆满闭营,中餐学院2022级新生军训…",
  },
  {
    day: "28",
    yer: "2019-01",
    ji: "中餐学院2022级新生军训圆满闭营,中餐学院2022级新生军训…",
  },
  {
    day: "28",
    yer: "2019-01",
    ji: "中餐学院2022级新生军训圆满闭营,中餐学院2022级新生军训…",
  },
]);
// 院部新闻接口
const newsList = ref();
const getnewsList = async () => {
  const {
    data: {
      data: { list },
    },
  } = await getnsList();
  console.log(list);
  newsList.value = list;
  $(function () {
  $(".news-box:first").show().siblings(".news-box").hide();
  var index = 0;
  $(".img-right").click(() => {
    index++;
    console.log(index);
    if (index < 3) {
      $(".news-box").eq(index).show().siblings(".news-box").hide();
    } else {
      index = -1;
    }
  });
  $(".img-left").click(() => {
    index--;
    if (index >= 0) {
      $(".news-box").eq(index).show().siblings(".news-box").hide();
    } else {
      index = 3;
    }
  });
});
};
getnewsList()
</script>

<style lang="scss">
@import "./index.css";
</style>
